<template>
  <div class="login">
    <el-card class="box-card">
      <div class="animate__animated animate__bounce title">全站大风车</div>
      <div>
        <el-button @click="changeCps(cpsTypes.Login)">登录</el-button>
        <el-button @click="changeCps(cpsTypes.Register)">注册</el-button>
      </div>
      <component :is="activeCps" :loginInfo="loginInfo"> </component>
      <Login v-if="activeCps === cpsTypes.Login" />
      <Register v-else />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import Login from "./cps/login.vue"
import Register from "./cps/register.vue"
enum cpsTypes {
  Login = "Login",
  Register = "Register"
}

//登陆界面数据
const loginInfo = reactive({
  userName: "",
  password: "",
  checkPassword: ""
})
//切换登录和注册组件
let activeCps = ref(cpsTypes.Login)
const changeCps = (cps: cpsTypes) => {
  if (cps !== activeCps.value) {
    activeCps.value = cps
  }
}
</script>

<style lang="less" scoped>
.login {
  background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic5.photo.sina.com.cn%2Fbmiddle%2F4a278360538e9d6b4cf64&refer=http%3A%2F%2Fstatic5.photo.sina.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637929207&t=03cf424c5bf9aae5fb102c38745108b7")
    no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  .box-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      font-size: 3vw;
      color: rgb(82, 18, 185);
      font-weight: bold;
    }
  }
}
</style>
